string.replace()

將指定字串 pattern 替換成給定的字串 replacement，並回傳處理後的新字串

// 用法
str.replace(pattern, replacement)

參數說明

• pattern：可以是一個字串或具 Symbol.replace 方法的物件。也可以是正規表達式（Regular expressions）。
  • 任何不具 Symbol.replace 方法的值都會被強制轉換為字串。
• replacement：替代用的目標；可以是字串也可以是函式。
  • 字串：會將配對到的第一個字串替換為指定字串。支援多種特殊替換模式。
  • 函式：會為每個配對呼叫指定函式，並將回傳值作為替換的文字。
• 回傳值：目標字串被替換完成後的一個新字串

來個練習吧！

以下問題來自 GPT
實作：替換第一個出現的子字串

const str = "Hello, World!";
let newStr = str.replace("World", "Otter");
console.log(newStr); // Hello, Otter!

string.substring()

取得從起始 index 至結束 index 間的字串（不包含結束 index 位置的字）。

// 語法
str.substring(indexStart)
str.substring(indexStart, indexEnd)

參數說明：

• indexStart：欲取得字串的起點索引值
• indexEnd：結束字串的索引值位置。
  • 注意：提取時不包含 indexEnd 的字元。
  • 若省略，substring() 會取得從 indexStart 至字串末端的字元
  • 若 indexStart = indexEnd，會回傳空字串
  • 若 indexStart > indexEnd，如同將兩個參數調換位置一樣： substring(indexEnd, indexStart)，
• 回傳值：回傳包含指定索引值字串組成的新字串

關於 indexStart 與 indexEnd 的實際例子：

// 1. 省略 indexEnd
const str = "Hello, World!";
// 從 index=7 開始取得字串（包含 index=7 的字元）
const result = str.substring(7);
console.log(result); // World!

// 2. indexStart = indexEnd
const str = "Hello, World!";
const result = str.substring(6, 6); // index=6 與 index=6 間沒有任何字
console.log(result); // 得到空字串

// 3. indexStart > indexEnd
const str = "Hello, World!";
const result1 = str.substring(2, 8); // index=2 至 index=8 間的字元
const result2 = str.substring(8, 2); // 結果同上
console.log(result1); // llo, W （包含空格）
console.log(result2); // llo, W （包含空格）

來個練習吧！

以下問題來自 GPT
基本：提取字串的一部分。

const str = "Hello, World!";
const newStr = str.substring(0, 5);
// index 0-4 會得到 hell
// index 0-3 會得到 hel
console.log(newStr); // Hello

string.slice()

提取字串的一部分，並回傳此新字串。

// 語法
str.slice(indexStart)
str.slice(indexStart, indexEnd)

參數說明：

• indexStart：提取的第一個字元的索引值
  • 若 index 為負，代表從原字串的最後開始開始算。例如 -1 代表是最後一個字開始、-2 代表是倒數第二個字開始，以此類推。
  • 若 index ≧ str.length，回傳空字串
  • 若省略或 indexStart 值為 undefined，或無法轉換為數字，會將 indexStart 視為 0。
• indexEnd：提取的結束索引值
  • 注意：提取時不包含 indexEnd的字元。
  • 若省略、indexEnd = undefined，或 indexEnd ≧ str.length，代表從 indexStart 取到字串最末
  • 若為負，與 indexStart 為負值的情況相同，皆是由原字串從後算起第 x 個index。
• 回傳值：包含擷取字串片段的新字串

const str = "Hello, world!";

// 1. 基本用法
// 從 index 0 開始提取，但不包括 index 5
const sliced = str.slice(0, 5);
console.log(sliced); // Hello

// 2. index < 0
// 從倒數第6個字開始取，但不包括倒數第1個字
const sliced = str.slice(-6, -1); 
console.log(sliced); // world

// 3. 省略 indexEnd
// 省略 indexEnd，從 index = 7 提取至字串末端
const sliced = str.slice(7);
console.log(sliced); // world!

// 4. indexStart 大於等於原字串長度
const sliced = str.slice(20);
console.log(sliced); // ' ', 空字串

// 5. indexStart 大於 indexEnd
const sliced = str.slice(8, 5);
console.log(sliced); // ' ', 空字串

來個練習吧！

以下問題來自 GPT
基本用法：取前十個字

const str = "JavaScript is awesome!";
const slice = str.slice(0, 10);
console.log(slice); // JavaScript

string.indexOf()

搜尋指定子字串並回傳第一次出現的 Index。

str.indexOf(searchString)
str.indexOf(searchString, position)

參數說明：

• searchString：要搜尋的目標字串
  • 輸入值皆會被強制轉換為字串。
  • 需注意若 searchString 為 undefined，會被轉為 "undefined" 導致出錯。
• position：指定搜索字串的起點索引值。
  • 預設值為 0
  • 若為負值，等同 position = 0
  • 若大於 str.length，不會執行搜索
• 回傳值：回傳目標字串第一次出現的 index。
  • -1：找不到目標時會回傳 -1

// 範例來自 MDN
const str = 'hello world hello';

console.log(str.indexOf('o', -5)); // 4
console.log(str.indexOf('world', 12)); // -1
console.log(str.indexOf('o', 99)); // -1

來個練習吧

// 範例：查找子字串的起始索引值
const str = "Hello, world!";
const searchTerm = "world";
const index = str.indexOf(searchTerm);
console.log(index); // 7

參考資料

• String.prototype.replace() - JavaScript | MDN，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace
• String.prototype.substring() - JavaScript | MDN，https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Stringsubstring)
• String.prototype.slice() - JavaScript | MDN，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice
• String.prototype.indexOf() - JavaScript | MDN，https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf